<template>
  <div class="pyqbox">
        <div class="" style="height:100%;">
            <div style="height:60px;text-align:center;background:#53aceb;font-size:20px;line-height:60px;color:#fff;">收藏</div>
            <div class="" style="height: 800px;margin-top: 10px;overflow-y: auto;overflow-x:hidden;padding: 0 10px;" v-if="list">
                    <div class="itembox" style="padding:10px;"  v-for="(item,index) in list" :key="index">
                        <div style="font-weight:1000;margin-bottom:10px" v-if="item.TITLE!==''">{{item.TITLE}}</div>
                        <div v-if="item.COLLECT_TYPE == 1" style="word-wrap: break-word;overflow-wrap: break-word;" v-html="item.CONTENT"></div>
                        <div v-if="item.COLLECT_TYPE == 14">
                        <div class="chat-record" style="border: 1px solid #e5e5e5; padding: 10px; margin: 10px 0;">
                            <!-- 从 XML 渲染聊天记录 -->
                            <div class="chat-item">
                            <strong>聊天记录:</strong>
                            </div>
                            <div>
                            <span>数据来源：{{item.TARGET_USERNAME}}</span>
                            </div>
                            <div v-html="parseXML(item.XML)"></div>
                        </div>
                        </div>
                        <div v-if="item.COLLECT_TYPE == 5">
                            <div style="display: flex; align-items: center;">
                                <img :src="getThumbnailUrl(item.XML)" alt="文章缩略图" style="width: 60px; height: 60px; margin-right: 10px;" />
                                <div>
                                <a :href="getArticleUrl(item.XML)" target="_blank" style="font-weight: bold; color: #409EFF;">
                                    {{ getArticleTitle(item.XML) }}
                                </a>
                                </div>
                            </div>
                        </div>
                        <div class="favInfo">
                            <div>
                                来源：{{item.TARGET_USERNAME}}
                            </div>
                            <div>
                                时间：{{FormData(item.COLLECT_TIME)}}
                            </div>
                        </div>
                    </div>
                <div style="display: flex; justify-content: center;">
                    <el-button type="text" @click="loadMore">加载更多</el-button>
                </div>
            </div>
        </div>
  </div>
</template>

<script>
import { getWxFavApi } from '@/api/weChat/weChat_api'
import { parseTime } from "@/utils/index";
export default {
    name:'wxFav2',
    props:['sendData'],
    data(){
        return{
            list:[],
            limit:20,
            offset:1,
            total:0,
            srcLogo:require('../../../assets/images/wechatFriend.png'),
        }
    },
    created(){
        this.init();
    },
    methods:{
        loadMore(){
            this.offset ++;
            this.init();
        },
        openLink(url){
            window.open(url,'_blank');
        },
        FormData(date){
            return parseTime(date)
        },
        init(){
            let data = {
                proof_num:this.sendData.proof_num,
                account_id:this.sendData.account_id,
                limit:this.limit,
                offset:this.offset
            }
            getWxFavApi(data).then(res=>{
                if(res.data.length > 0){
                    // this.list = res.data;
                    this.list.push(...res.data);
                    this.total = res.data[0].cnt;
                }else{
                    this.$message({
                        message: "没有更多数据了",
                        type: "info",
                    });
                }
            }).catch(err=>{

            })
        },
        // 从 XML 中解析文章标题
        getArticleTitle(xmlString) {
            const parser = new DOMParser();
            const xmlDoc = parser.parseFromString(xmlString, "text/xml");
            const datatitle = xmlDoc.getElementsByTagName("datatitle")[0]?.textContent || "未知标题";
            return datatitle;
        },
         // 从 XML 中解析文章链接
        getArticleUrl(xmlString) {
            const parser = new DOMParser();
            const xmlDoc = parser.parseFromString(xmlString, "text/xml");
            const stream_weburl = xmlDoc.getElementsByTagName("stream_weburl")[0]?.textContent || "#";
            return stream_weburl;
        },
          // 从 XML 中解析文章缩略图
        getThumbnailUrl(xmlString) {
            const parser = new DOMParser();
            const xmlDoc = parser.parseFromString(xmlString, "text/xml");
            const pagethumb_url = xmlDoc.getElementsByTagName("pagethumb_url")[0]?.textContent || "";
            return pagethumb_url;
        },
          // 从 XML 中解析来源名称
        getSourceName(xmlString) {
            const parser = new DOMParser();
            const xmlDoc = parser.parseFromString(xmlString, "text/xml");
            const srcdisplayname = xmlDoc.getElementsByTagName("srcdisplayname")[0]?.textContent || "未知来源";
            return srcdisplayname;
        },
            // 解析 XML 字符串
        parseXML(xmlString) {
            const parser = new DOMParser();
            const xmlDoc = parser.parseFromString(xmlString, "text/xml");

            const title = xmlDoc.getElementsByTagName("title")[0]?.textContent || "";
            const datasrcname = xmlDoc.getElementsByTagName("datasrcname")[0]?.textContent || "";
            const datasrctime = xmlDoc.getElementsByTagName("datasrctime")[0]?.textContent || "";
            const datadesc = xmlDoc.getElementsByTagName("datadesc")[0]?.textContent || "";

            // 生成渲染的 HTML 内容
            return `
            <div>
                <strong>内容:</strong> ${datadesc}
            </div>
            `;
        }
    }
}
</script>

<style scoped>
.favInfo{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}
.itembox{
    min-height: 80px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    margin-top: 10px;
}
.pyqbox{
    height: 90%;
    background: #fbfafa;
}

.openBox{
    width: 1px;
    height: 100px;
    cursor: pointer;
}
.wxAppText{
    text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;	
	display: -webkit-box;	
	-webkit-line-clamp: 2;	
	line-clamp: 2;		
	-webkit-box-orient: vertical;
    font-size: 16px;
}
    .topWxFBox{
        background: url('https://img2.baidu.com/it/u=1840828656,940167964&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625');
        background-size: 100% 100%;
        background: cover;
    }

    .topWxFBox{-webkit-animation:kenburns-top 5s ease-out both;animation:kenburns-top 5s ease-out both}

    @-webkit-keyframes kenburns-top{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0);-webkit-transform-origin:50% 16%;transform-origin:50% 16%}100%{-webkit-transform:scale(1.25) translateY(-15px);transform:scale(1.25) translateY(-15px);-webkit-transform-origin:top;transform-origin:top}}@keyframes kenburns-top{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0);-webkit-transform-origin:50% 16%;transform-origin:50% 16%}100%{-webkit-transform:scale(1.25) translateY(-15px);transform:scale(1.25) translateY(-15px);-webkit-transform-origin:top;transform-origin:top}}
    .shouCang:hover{
        font-weight: bold;
        color: #38c5f9;
    }
    ::-webkit-scrollbar {
        width: 4px;
        height: 10px;
    }
    ::-webkit-scrollbar-button {
        background-color: rgb(255, 255, 255);
    }

    ::-webkit-scrollbar-track-piece {
        background: rgb(230, 230, 230);
    }

    ::-webkit-scrollbar-thumb {
        background: rgb(194, 194, 196);
        border-radius: 4px;
    }
    .pengyouquan:hover{
        color:#38c5f9;
        font-weight: 1000;
    }
    .pengyouquan > img {
        transform: rotate(0deg); /* 默认状态下不旋转 */
        transition: transform 0.3s ease; /* 添加默认的过渡效果 */
    }
.pengyouquan:hover>img{
    width: 20px;
    height: 20px;
    transform:rotate(180deg);
}
</style>